<template>
  <div>
    <tz-breadcrumb :title='["管理中心", "欢迎页"]'
                   :pathArr='[{"name": "管理中心"},{"name": "欢迎页", "url": "/adminindex"}]'></tz-breadcrumb>
    <div class="home-contain mt20 box-card-shadow">
      <!-- 首页四个统计 -->
      <el-row>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img greenbg text-center">
              <img src="./../../public/img/home-store.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ storeCount }}</h2>
              <p>总店铺数</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img bluebg text-center">
              <img src="./../../public/img/home-wallet.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ dealCount }}</h2>
              <p>总成交额</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img yellowbg text-center">
              <img src="./../../public/img/home-order.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ fundauthCount }}</h2>
              <p>总预授权订单</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img redbg text-center">
              <img src="./../../public/img/home-pay.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ orderCount }}</h2>
              <p>总支付订单</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 图表位置 -->
      <el-row>
        <el-col :span="24">
          <tz-brokenline style="width:100%"
                         class="echartsDemo"
                         :styles='brokenline.styles'
                         :xData='brokenline.xData'
                         :paramsData='brokenline.paramsData'
                         :title='brokenline.title'></tz-brokenline>
        </el-col>
      </el-row>
      <!-- 昨日数据 -->
      <el-row class="mt40">

        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img today-count-line  text-center">
              <img src="./../../public/img/home-add.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ storeYesterday }}</h2>
              <p>昨日新增店铺</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img today-count-line  text-center">
              <img src="./../../public/img/home-dollor.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ dealYesterday }}</h2>
              <p>昨日交易额</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img today-count-line  text-center">
              <img src="./../../public/img/home-cart.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ fundauthYesterday }}</h2>
              <p>昨日预授权订单</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content ">
            <div class="head-part-img today-count-line  text-center">
              <img src="./../../public/img/home-money.png" />
            </div>
            <div class="head-part-text">
              <h2 class="large">{{ orderYesterday }}</h2>
              <p>昨日支付订单</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 支付通道总计 -->
      <el-row class="mt40">
        <el-col :span="6"
                class="store-count-border">
          <div class="store-count-content  bg-light-blue">
            <div class="store-count-top">
              <div class="left store-count-text">
                支付宝总交易额
              </div>
              <div class="right store-count-text">
                <span class="count-tip">总计</span>
              </div>
            </div>
            <div class="grid-content mt20">
              <img class="store-count-img"
                   src="./../../public/img/alipay-select.png" />
              <div class="head-part-text">
                <h2 class="store-count-text">{{ alipayStore }}</h2>

              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6"
                class="store-count-border">
          <div class="store-count-content  bg-purple">
            <div class="store-count-top">
              <div class="left store-count-text">
                微信总交易额
              </div>
              <div class="right store-count-text">
                <span class="count-tip">总计</span>
              </div>
            </div>
            <div class="grid-content mt20">
              <img class="store-count-img"
                   src="./../../public/img/weixin.png" />
              <div class="head-part-text">
                <h2 class="store-count-text">{{ wechatStore }}</h2>

              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6"
                class="store-count-border">
          <div class="store-count-content  bg-light-green">
            <div class="store-count-top">
              <div class="left store-count-text">
                订单交易额
              </div>
              <div class="right store-count-text">
                <span class="count-tip">昨日</span>
              </div>
            </div>
            <div class="grid-content mt20">
              <img class="store-count-img"
                   src="./../../public/img/alipay-select.png" />
              <div class="head-part-text">
                <h2 class="store-count-text">{{ alipayOrderDeal }}</h2>

              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6"
                class="store-count-border">
          <div class="store-count-content  bg-light-red">
            <div class="store-count-top">
              <div class="left store-count-text">
                订单交易额
              </div>
              <div class="right store-count-text">
                <span class="count-tip">昨日</span>
              </div>
            </div>
            <div class="grid-content mt20">
              <img class="store-count-img"
                   src="./../../public/img/weixin.png" />
              <div class="head-part-text">
                <h2 class="store-count-text">{{ wechatOrderDeal }}</h2>

              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 统计列表 -->
      <div class="top-list mt40">
        <el-row :gutter="10">
          <el-col :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  :xl="8">
            <el-card class="list-border">
              <div slot="header"
                   class="clearfix">
                <span class="list-head">一周内总交易额TOP10</span>
              </div>
              <el-table :data="tableData1"
                        style="width:100%"
                        class="list-table"
                        cell-class-name='text-center'>
                <el-table-column type="index"
                                 label="排名"
                                 width="48">
                </el-table-column>
                <el-table-column prop="name"
                                 label="商户">
                </el-table-column>
                <el-table-column prop="money"
                                 label="总交易额"
                                 width="100">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  :xl="8">
            <el-card class="list-border">
              <div slot="header"
                   class="clearfix">
                <span class="list-head">一周内总预授权订单数TOP10</span>
              </div>
              <el-table :data="tableData2"
                        style="width:100%"
                        class="list-table"
                        cell-class-name='text-center'>
                <el-table-column type="index"
                                 label="排名"
                                 width="48">
                </el-table-column>
                <el-table-column prop="name"
                                 label="商户">
                </el-table-column>
                <el-table-column prop="money"
                                 label="总交易额"
                                 width="100">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :xs="8"
                  :sm="8"
                  :md="8"
                  :lg="8"
                  :xl="8">
            <el-card class="list-border">
              <div slot="header"
                   class="clearfix">
                <span class="list-head">一周内总支付订单数TOP10</span>
              </div>
              <el-table :data="tableData3"
                        style="width:100%"
                        class="list-table"
                        cell-class-name='text-center'>
                <el-table-column type="index"
                                 label="排名"
                                 width="48">
                </el-table-column>
                <el-table-column prop="name"
                                 label="商户">
                </el-table-column>
                <el-table-column prop="money"
                                 label="总交易额"
                                 width="100">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>

</template>
<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
import Echo from 'laravel-echo';
// 折线图引用
import brokenline from '@/components/echarts/brokenline';
export default {
  components: {
    // 导航组件引用
    'tz-breadcrumb': tzBreadcrumb,
    // 折线图组件引用
    'tz-brokenline': brokenline
  },
  methods: {
    getTimeStr (val) {
      var arr = [];
      for (var i = 7; i > 0; i--) {
        var time = new Date(new Date().getTime() - 86400000 * i);
        var year = time.getFullYear();
        var month = time.getMonth() * 1 + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
        var day = time.getDate() < 10 ? ('0' + time.getDate()) : time.getDate();
        // var str = time.getFullYear() + '-' + (time.getMonth() + 1 < 10 ? '0' + (time.getMonth() * 1) : time.getMonth() * 1 + 1) + '-' + time.getDate() < 10 ? ('0' + time.getDate() * 1) : time.getDate();
        var str = year + '-' + month + '-' + day;
        arr.push(str);
      };
      return arr;
    }
  },
  created () {
    console.log('1111222');
    window.Echo = new Echo({
      broadcaster: 'socket.io',
      host: 'http://newpayweb.tiaze.com:6001'
    });
    console.log('1111222');
    window.Echo.channel('notice')
      .listen('TestBroadcastingEvent', (e) => {
        // 如果有广播过来你可以进行逻辑操作，比如给用户一个通知
        console.log(e);
        console.log(e.order);
      });
    // console.log(localStorage.getItem('token'));
    let that = this;
    http.post(api.HomeData, {
      token: localStorage.getItem('token')
    }, (res) => {
      // console.log(res);
      console.log(555);
      if (res.code === '10001' && res.status === 'SUCCESS') {
        let responses = res.data[0];
        that.storeCount = responses.firstTable.storeCount;
        that.dealCount = responses.firstTable.dealCount;
        that.fundauthCount = responses.firstTable.fundauthCount;
        that.orderCount = responses.firstTable.orderCount;

        that.brokenline.paramsData = responses.secondTable;

        that.storeYesterday = responses.thirdTable.storeYesterday;
        that.dealYesterday = responses.thirdTable.dealYesterday;
        that.fundauthYesterday = responses.thirdTable.fundauthYesterday;
        that.orderYesterday = responses.thirdTable.orderYesterday;

        that.alipayStore = responses.fourthTable.alipayStore;
        that.wechatStore = responses.fourthTable.wechatStore;
        that.alipayOrderDeal = responses.fourthTable.alipayOrderDeal;
        that.wechatOrderDeal = responses.fourthTable.wechatOrderDeal;

        that.tableData1 = responses.fifthTable.tableData1;
        that.tableData2 = responses.fifthTable.tableData2;
        that.tableData3 = responses.fifthTable.tableData3;
      }
    }, () => {
      console.log('网络错误');
    });
  },
  data () {
    return {
      storeCount: 0,
      dealCount: 0,
      fundauthCount: 0,
      orderCount: 0,

      // 折线图数据
      brokenline: {
        styles: { width: '100%', height: '300px' },
        xData: this.getTimeStr(),
        paramsData: [],
        title: ''
      },
      storeYesterday: 0,
      dealYesterday: 0,
      fundauthYesterday: 0,
      orderYesterday: 0,

      alipayStore: 0,
      wechatStore: 0,
      alipayOrderDeal: 0,
      wechatOrderDeal: 0,

      tableData1: [],
      tableData2: [],
      tableData3: []
    };
  }
};
</script>
<style lang="stylus" scoped>
@import url('./home.css')
.home-contain
  background #fff
  padding 20px
  box-sizing border-box
.mt20
  margin-top 20px
.mt40
  margin-top 40px
.greenbg
  background #23C6C8
.bluebg
  background #1C84C6
.yellowbg
  background #F8AC59
.redbg
  background #ED5565
.bg-light-blue
  background #99CCFF
.bg-light-green
  background #1ACFAB
.bg-light-red
  background #ed5565
.grid-content
  display flex
  color #666
.bg-purple
  background #908DC1
.head-part-text
  flex 1
  margin 0 10px
  h2
    font-size 24px
    margin 0px 0 10px 0
.head-part-img
  width 60px
  height 60px
  line-height 60px
  border-radius 5px
  img
    width 30px
    height 30px
    margin-top 15px
.today-count-line
  border-bottom 2px solid #00E8D7
  border-radius 0px
.store-count-border
  padding-right 20px
  box-sizing border-box
.store-count-content
  padding 10px 10px 15px 10px
  box-sizing border-box
.store-count-img
  width 30px
  height 30px
.store-count-text
  color #fff
.store-count-top
  display flex
  justify-content space-between
  .count-tip
    background #1c84c6
    padding 2px 5px
    box-sizing border-box
    border-radius 5px
.list-border
  border 1px solid #23c6c8
  color #666
  .list-head
    font-weight bold
    font-size 14px
.list-table
  margin-top -20px
.box-card-shadow
  box-shadow 1px 1px 1px #999
</style>
